<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>日历表</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 黑体;
			}
			
			body {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background-color:peachpuff; 
			}
			
			.container {
				width: 352px;
				margin: auto;
			}
			
			h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			
			.week,
			.day {
				display: flex;
				width: 352px;
				flex-wrap: wrap;
				border: 1px solid #999;
			}
			
			.week span,
			.day span {
				line-height: 50px;
				text-align: center;
				width: 50px;
				height: 50px;
				box-shadow: 1px 1px 1px #999;
			}
			
			.h {
				color: #999999;
			}
			
			.today {
				background: firebrick;
				color: coral;
			}
			
			p {
				color: #eee;
				box-shadow: 0px 10px 200px #fff;
			}
			
		</style>
	</head>

	<body>

		<div class="container">
			<div class="title">
				<h2 ><span id="nian"></span>年<span id="yue"></span>月</h2>
			</div>
			<div class="week">
				<span>日</span>
				<span>一</span>
				<span>二</span>
				<span>三</span>
				<span>四</span>
				<span>五</span>
				<span>六</span>
			</div>
			<div class="day" id="day"></div>
		</div>

		<script>
			var year = prompt("请输入年份");
			var month = prompt("请输入月份");

			year = Number(year);
			month = Number(month);

			//闰年true 平年fales
			function runNian(year) {
				if(year % 400 === 0 || (year % 4 === 0 && year % 100 !== 0)) {
					return true;
				} else {
					return false;
				}
			}

			var days = 0;
			//1980年到2018年全年
			for(var i = 1980; i < year; i++) {
				if(runNian(i)) {
					days += 366;
				} else {
					days += 365;
				}
			}

			for(var k = 1; k < month; k++) {
				switch(k) {
					case 1:
						days += 31;
						break;
					case 2:
						if(runNian(year)) {
							days += 29;
						} else {
							days += 28;
						}
						break;
					case 3:
						days += 31;
						break;
					case 4:
						days += 30;
						break;
					case 5:
						days += 31;
						break;
					case 6:
						days += 30;
						break;
					case 7:
						days += 31;
						break;
					case 8:
						days += 31;
						break;
					case 9:
						days += 30;
						break;
					case 10:
						days += 31;
						break;
					case 11:
						days += 30;
						break;
					case 12:
						days += 31;
						break;
				}

			}

			//因为1980年的1月1日前面有两个空位所以加2
			days += 2;

			console.log(days);

			//算出起始位置
			var start = days % 7;
			console.log(start);

			//选上这个标签
			var day = document.querySelector("#day");

			//上个月一共有多少天？
			var prevDay = 0;
			//找到上个月多少天
			switch(month - 1) {
					case 0:
						prevDay += 31;
						break;
				case 1:
					prevDay += 31;
					break;
				case 2:
					if(runNian(year)) {
						prevDay += 29;
					} else {
						prevDay += 28;
					}
					break;
				case 3:
					prevDay += 31;
					break;
				case 4:
					prevDay += 30;
					break;
				case 5:
					prevDay += 31;
					break;
				case 6:
					prevDay += 30;
					break;
				case 7:
					prevDay += 31;
					break;
				case 8:
					prevDay += 31;
					break;
				case 9:
					prevDay += 30;
					break;
				case 10:
					prevDay += 31;
					break;
				case 11:
					prevDay += 30;
					break;
				case 12:
					prevDay += 31;
					break;
			}

			//这个月一共有多少天？
			var thisDay = 0;
			//找到这个月多少天
			switch(month) {
					case 0:
						thisDay += 31;
						break;
				case 1:
					thisDay += 31;
					break;
				case 2:
					if(runNian(year)) {
						thisDay += 29;
					} else {
						thisDay += 28;
					}
					break;
				case 3:
					thisDay += 31;
					break;
				case 4:
					thisDay += 30;
					break;
				case 5:
					thisDay += 31;
					break;
				case 6:
					thisDay += 30;
					break;
				case 7:
					thisDay += 31;
					break;
				case 8:
					thisDay += 31;
					break;
				case 9:
					thisDay += 30;
					break;
				case 10:
					thisDay += 31;
					break;
				case 11:
					thisDay += 30;
					break;
				case 12:
					thisDay += 31;
					break;
			}

			for(var j = prevDay - start + 1; j <= prevDay; j++) {
				day.innerHTML += '<span class="h">' + j + '</span>';
			}

			//取到今天
			var d = new Date().getDate();

			for(var s = 1; s <= thisDay; s++) {
				if(s == d) {
					day.innerHTML += '<span class="today">' + s + '</span>';
				} else {
					day.innerHTML += '<span>' + s + '<span>';
				}
			}

			//总空位是42位
			var num = 42;

			//算出还剩几个位置
			var endDdy = num - start - thisDay;

			for(var e = 1; e <= endDdy; e++) {
				day.innerHTML += '<span class="h">' + e + '</span>';
			}

			//赋值标题的年和月

			document.querySelector("#nian").innerHTML = year;
			document.querySelector("#yue").innerHTML = month;
		</script>
		<script src="script.js"></script>

	</body>

</html>